<template>
    <view class="book-page-body">
        <view class="" style="position: relative;">
            <image :style="{width:(imgInfo.nW?imgInfo.nW:imgInfo.w)+'px',height:(imgInfo.nH?imgInfo.nH:imgInfo.h)+'px'}" :src="imgInfo.src"></image>
            <movable-area class="mArea" >
                <movable-view @change="handleChange" @mouseup="handleEnd($event,item)" @touchend="handleEnd($event,item,idx)" :ref="'mv'+idx" :x="item.nX" :y="item.nY" :style="{width:(item.nW?item.nW:item.w)+'px',height:(item.nH?item.nH:item.h)+'px'}" direction="all" v-for="(item,idx) in imgInfo.items" :key="idx+''">
                    <image  :src="item.src" ></image>
                </movable-view>
            </movable-area>
            <view class="reset">
                <button @tap="handleReset()" type="primary">重置</button>
            </view>
        </view>

    </view>
        
         
</template>

<script>
    import tips from '@/core/tips.js'
    export default{
        data(){
            return {
                currentDetail:{},
                scale :1,
                imgInfo:{
                    w:650,
                    h:451,
                    src:require( '@/static/demo/drag.png'),
                    items:[
                        {
                            src:require( '@/static/demo/drag1.png'),
                            w:65,
                            h:65,
                            x:558,
                            nX:0,
                            y:125,
                            nY:0,
                            target:{
                                w:65,
                                h:65,
                                x:371,
                                y:302,
                            }
                        },
                        {
                            src:require( '@/static/demo/drag2.png'),
                            w:65,
                            h:65,
                            x:558,
                            y:206,
                            nX:0,
                            nY:0,
                            target:{
                                w:65,
                                h:65,
                                x:326, 
                                y:148
                                
                            }
                        },
                        {
                            src:require( '@/static/demo/drag3.png'),
                            w:65,
                            h:65,
                            x:558,
                            y:286,
                            nX:0,
                            nY:0,
                            target:{
                                w:65,
                                h:65,
                                x:108,
                                y:152,
                            }
                        },
                        {
                            src:require( '@/static/demo/drag4.png'),
                            w:65,
                            h:65,
                            x:558,
                            y:365,
                            nX:0,
                            nY:0,
                            target:{
                                w:65,
                                h:65,
                                x:164,
                                y:334,
                            }
                        },
                    ],
                }
            }
        },
        onLoad() {
            window.addEventListener('orientationchange',(event)=>{
                this.setPosition(event.currentTarget.innerWidth,event.currentTarget.innerHeight)
            })
            this.setPosition(window.screen.width,window.screen.height)
        },
        mounted() {
            if(window.screen.width < window.screen.height){

                document.querySelector('.reset').classList.remove('ladscape')
            }else{
                document.querySelector('.reset').classList.add('ladscape')
            }
        },
        // 2 targe: x:326, y:148,
        methods:{
            setPosition(width,height){
                if(width < height){ //竖屏
                    this.scale = width/this.imgInfo.w
                    this.imgInfo.nW = width
                    this.imgInfo.nH = this.imgInfo.h * this.scale
                    if(document.querySelector('.reset')){
                        document.querySelector('.reset').classList.remove('ladscape')
                    }
                }else{ //横屏
                    this.scale = height/this.imgInfo.h
                    this.imgInfo.nH = height
                    this.imgInfo.nW = this.imgInfo.w * this.scale
                    if(document.querySelector('.reset')){
                        document.querySelector('.reset').classList.add('ladscape')
                    }
                }
                
                this.imgInfo.items.forEach(item=>{
                    item.target.nW = item.target.w * this.scale
                    item.target.nH = item.target.h * this.scale
                    item.target.nX = item.target.x * this.scale
                    item.target.nY = item.target.y * this.scale
                    item.nW = item.w * this.scale
                    item.nH = item.h * this.scale
                    if(item.success){
                        item.nY = item.target.nY
                        item.nX = item.target.nX
                    }else{
                        item.nY = item.y * this.scale
                        item.nX = item.x * this.scale
                    }
                })
            },
            handleChange(e){
                this.currentDetail = e.detail
                
            },
            handleReset(){
                this.imgInfo.items.forEach(item=>{
                    item.nY = item.y * this.scale
                    item.nX = item.x * this.scale
                    item.success = false
                })
            },
            handleEnd(event,item){
                const x=parseInt( this.currentDetail.x || 0)
                     ,x2=x+item.nW
                     ,minX = item.target.nX
                     ,maxX = minX + item.target.nW
                     ,y=parseInt( this.currentDetail.y || 0 )
                     ,y2=y+item.nH
                     ,minY = item.target.nY
                     ,maxY = minY + item.target.nH
                let  mvX ,mvY
                 item.success = ((minX <= x && x <= maxX) || (minX <= x2 && x2 <= maxX)) &&  ((minY <= y && y <= maxY) || (minY <= y2 && y2 <= maxY))
                 
                 if( item.success){
                     mvX = item.target.nX
                     mvY = item.target.nY
                     this.handleComplate()
                 }else{
                     mvX = item.x * this.scale
                     mvY = item.y * this.scale
                     tips.error()
                 }
                item.nX = mvX+1
                item.nY = mvY+1
                setTimeout(()=>{
                    item.nX = mvX-1
                    item.nY = mvY-1
                },300)
                
            },
            handleComplate(){
                let complate= true;
                this.imgInfo.items.forEach(row=>{
                    if(!row.success){
                        complate=false
                    }
                })
                if(complate){
                    tips.complate()
                }else{
                    tips.success()
                }
            }
        }
       
    }
</script>

<style scoped>
    .book-page-body{
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    
     }
     .mArea{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
     }
     .mArea uni-image{
         width: 100%;
         height: 100%;
     }
     .reset{
         text-align: center;
     }
     .reset.ladscape{
         position: absolute;
         bottom: 0;
         right: -65px;
     }
     .reset uni-button{
         display: inline-block;
     }
</style>